<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM练习</title>
    <script>
        window.onload = function (){
            let trArray=document.getElementsByClassName("data");

            for (let i=0;i<trArray.length;i++){
                trArray[i].onclick= function (){
                    choose(this);
                }
            }
        }
        function $(id){
            return document.getElementById(id);
        }

        /**
         * 添加一个新员工
         */
        function add(){
            let newTr = document.createElement("tr");
            newTr.innerHTML= "<td>"+$("code").value+"</td><td>"+$("name").value+"</td><td>"+$("salary").value+"</td>";
            $("data").append(newTr);
        }
        let closeObj = null;
        function choose(trObj){
            if (closeObj != null){
                closeObj.style.backgroundColor= "white";
            }
            trObj.style.backgroundColor = "green";
            closeObj=trObj;
        }
    </script>
</head>
<body>
<div style="  width: 700px;display: flex;">
    <table border="1px" cellspacing="0" width="30%" style="margin-right: 30px">
        <thead><tr><th>工号</th><th>姓名</th><th>工资</th></tr></thead>
        <tbody id="data" class="data">
        <tr><td>001</td><td>文瑜</td><td>6000</td></tr>
        <tr><td>002</td><td>周帆</td><td>4000</td></tr>
        <tr><td>003</td><td>李静</td><td>3500</td></tr>
        <tr><td>004</td><td>文黎</td><td>4500</td></tr>
        <tr><td>005</td><td>李寒</td><td>9800</td></tr>
        <tr><td>006</td><td>杨自华</td><td>7200</td></tr>
        </tbody>
    </table>
    <br><br>
    <div style="width: 400px">
        工号：<input type="text" id="code"> <br>
        姓名：<input type="text" id="name"> <br>
        工资：<input type="text" id="salary"> <br><br>
        <input type="button" value="添加" onclick="add()"> &nbsp;
        <input type="button" value="修改" onclick="update()">&nbsp;
        <input type="button" value="删除" onclick="del()" id="delButton">
        <input type="button" value="清空所有" onclick="delAll()">
    </div>
</div>
</body>
</html>